import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import context from '../../context'
import './Item.css'
export default class Item extends Component {
  static contextType = context
  state = {
    tN: '',
  }
  render() {
    //从this.props上解构todo
    const {
      // 解构出来的todo,也是对象,继续解构
      todo: { id, todoName, isDone },
      delTodo,
      updateTodo,
      editToggle, //修改id.用来展示编辑的文本框
      editTodo, // 传递给app,让app修改任务名的方法
    } = this.props

    const { tN } = this.state

    return (
      <li>
        {
          // 判断当前数据的id和app的id是否一致
          id !== this.context ? (
            <label>
              {/* 当表单元素的值被控制,则必须要写一个onChange.否则会警告 */}
              <input
                type="checkbox"
                checked={isDone}
                onChange={function (e) {
                  // console.log(e.target.checked) e.target.checked可以获取到目标值\
                  updateTodo(id, e.target.checked)
                }}
              />
              <span className={isDone ? 'active' : ''}>{todoName}</span>
            </label>
          ) : (
            <input
              type="text"
              id={id}
              value={tN}
              // 注意: DOM中文本框的change事件,是在失去焦点的时候触发.但是react中change事件是在用户每次输入的时候就会触发.类似于input事件
              onChange={(e) => {
                // console.log(e.target.value.trim())
                this.setState({
                  tN: e.target.value.trim(),
                })
              }}
              onKeyDown={(e) => {
                if (e.keyCode !== 13 || !tN) return
                editTodo(id, tN)
              }}
            />
          )
        }
        <button
          className="btn btn-danger"
          onClick={() => {
            PubSub.publish('del', id)
          }}
        >
          删除
        </button>
        <button
          className="btn btn-danger"
          style={{
            backgroundColor: 'skyblue',
            border: 'none',
            marginRight: 10,
          }}
          onClick={() => {
            editToggle(id)
            this.setState({
              tN: todoName,
            })
          }}
        >
          {id !== this.context ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
